import type React from 'react';
import {
  type TransformHistory as TransformHistoryType,
  TransformType,
} from '../../types';
import styles from './TransformHistory.module.less';

interface TransformHistoryProps {
  history: TransformHistoryType[];
}

export const TransformHistory: React.FC<TransformHistoryProps> = ({
  history,
}) => {
  // 将TransformType转换为中文显示
  const getTypeDisplayName = (type: TransformType): string => {
    switch (type) {
      case TransformType.TRANSLATE:
        return '平移';
      case TransformType.ROTATE:
        return '旋转';
      case TransformType.SCALE:
        return '缩放';
      case TransformType.SHEAR:
        return '倾斜';
      case TransformType.MATRIX:
        return '矩阵';
      default:
        return type;
    }
  };

  // 格式化时间戳
  const formatTimestamp = (timestamp: number): string => {
    return new Date(timestamp).toLocaleTimeString();
  };

  return (
    <div className={styles.history}>
      <h3>变换历史</h3>

      {history.length === 0 ? (
        <p className={styles.empty}>暂无变换历史</p>
      ) : (
        <div className={styles.historyList}>
          {history.map((item) => (
            <div
              key={`${item.type}-${item.timestamp}`}
              className={styles.historyItem}
            >
              <span className={styles.index}>#{history.indexOf(item) + 1}</span>
              <span className={styles.type}>
                {getTypeDisplayName(item.type)}
              </span>
              <span className={styles.description}>
                {item.description || '变换操作'}
              </span>
              <span className={styles.timestamp}>
                {formatTimestamp(item.timestamp)}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};
